<template>
    <div>
        <mr-page-head :title="false">
            <div slot="headerContent">
                <div class="clearfix">
                    <span
                        class="ant-page-header-heading-title"
                        title="单号：234231029431"
                    >
                        单号：234231029431
                    </span>
                </div>
                <a-row :gutter="[16, 16]">
                    <a-col :span="8"></a-col>
                </a-row>
                <ul>
                    <li v-for="(item, key) in list" :key="key"></li>
                </ul>
                <a-row>
                    <a-col :span="20">
                        <a-row>
                            <a-col
                                :span="12"
                                v-for="(item, key) in list"
                                :key="key"
                            >
                                <div class="mb-2">
                                    <span
                                        class="ant-descriptions-item-label ant-descriptions-item-colon"
                                    >
                                        {{ item.a }}
                                    </span>
                                    <span>{{ item.b }}</span>
                                </div>
                            </a-col>
                        </a-row>
                    </a-col>
                    <a-col :span="3">
                        <div class="ant-pro-page-header-wrap-extraContent ">
                            <div
                                class="antd-pro-pages-profile-advanced-style-moreInfo d-flex justify-content-between"
                            >
                                <div class="ant-statistic">
                                    <div class="ant-statistic-title">状态</div>
                                    <div class="ant-statistic-content">
                                        <span
                                            class="ant-statistic-content-value"
                                        >
                                            待审批
                                        </span>
                                    </div>
                                </div>
                                <div class="ant-statistic">
                                    <div class="ant-statistic-title">
                                        订单金额
                                    </div>
                                    <div class="ant-statistic-content">
                                        <span
                                            class="ant-statistic-content-prefix"
                                        >
                                            ¥
                                        </span>
                                        <span
                                            class="ant-statistic-content-value"
                                        >
                                            <span
                                                class="ant-statistic-content-value-int"
                                            >
                                                568
                                            </span>
                                            <span
                                                class="ant-statistic-content-value-decimal"
                                            >
                                                .08
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </mr-page-head>
        <mr-page-view :title="`我是标题`" :style="{ margin: `20px  24px`, width: 'auth' }">
            <div>165</div>
        </mr-page-view>

        <br />
        <mr-page-view :title="tabListNoTitle" :style="{ margin: `20px  24px`, width: 'auth' }">
            <div>165</div>
        </mr-page-view>
    </div>
</template>

<script>
export default {
    name: 'editor',
    data() {
        return {
            list: [
                { a: '创建人', b: '曲丽丽' },
                { a: '订购产品', b: 'XX 服务' },
                { a: '创建时间', b: '2030-07-07' },
                { a: '关联单据', b: '12421' },
                { a: '生效日期', b: '2017-07-07 ~ 2017-08-08' },
                { a: '备注', b: '请于两个工作日内确认' }
            ],
            tabListNoTitle: [
                {
                    key: 'article',
                    tab: 'article',
                },
                {
                    key: 'app',
                    tab: 'app',
                },
                {
                    key: 'project',
                    tab: 'project',
                },
            ]
        }
    }
}
</script>
